<!-- 歌曲列表 -->
<template>
	<view class="list-songs">
		<!-- 播放全部按钮 -->
		<view class="list-songs__action" :style="{ 'background-color': actionBg }">
			<!-- 左侧 按钮 -->
			<view class="list-songs__action-left" @tap.stop.prevent="playAll">
				<view class="list-songs__action-left-play" />
				<view class="list-songs__action-left-desc">
					<text class="action-left-desc__text-1">播放全部</text>
					<text class="action-left-desc__text-2">({{ trackIds.length }})</text>
				</view>
			</view>
			<!-- 右侧（搁置） 下载和选中 -->
			<view class="list-songs__action-right">
				<view class="list-songs__action-right-download"></view>
				<view class="list-songs__action-right-opt" />
			</view>
		</view>

		<!-- 歌单列表 s -->
		<view style="padding: 0 23rpx">
			<!-- 虚拟列表 -->
			<ListSongsInfinite v-if="isinfinite" :songs="data.songs" />
			<!-- 普通列表 -->
			<ListSongsCommon v-else :songs="data.songs" />
		</view>
		<!-- 歌单列表 e -->
	</view>
</template>

<script>
export default {
	name: 'ListSongs',
	data() {
		return {
			data: {
				songs: [],

				// 已经请求的次数
				trackRequestCount: 0
			}
		};
	},
	props: {
		// 歌曲所有id数组
		trackIds: {
			type: Array,
			default: []
		},

		// 是否用虚拟滚动列表
		isinfinite: {
			type: Boolean,
			default: true
		},

		// 播放全部按钮栏背景色
		actionBg: {
			type: String
		}
	},
	watch: {
		'trackIds.length': {
			immediate: true,
			handler(newValue) {
				console.log('歌曲列表监听到props.trackIds.length', newValue);
				if (newValue > 0) {
					this.getData();
					// setTimeout(() => stopWatcher(), 0);
				}
			}
		}
	},

	onReachBottom() {
		this.getData();
	},

	methods: {
		/**
		 * 获取数据
		 */
		getData() {
			// 一次加载数量
			const onceLoadCount = 300;

			// 当已经请求的数量小于总数量时
			if (this.data.trackRequestCount <= Math.floor(this.trackIds?.length / onceLoadCount)) {
				if (this.trackIds?.length >= onceLoadCount) {
					// 当歌曲数量过多，需要分段加载时
					const startIdx = this.data.trackRequestCount * onceLoadCount;
					this.data.trackRequestCount++;
					const endIdx = this.data.trackRequestCount * onceLoadCount;
					uni.showLoading({ title: `加载中` });
					this.$store.dispatch('getSongsDetail', this.trackIds.slice(startIdx, endIdx)).then((res) => {
						this.data.songs.push(...res);
						// 歌曲序号
						this.data.songs.map((v, i) => {
							v.idx = i + 1;
							return v;
						});
						uni.hideLoading();
					});
				} else {
					// 一次加载
					uni.showLoading({ title: `加载中` });
					this.data.trackRequestCount++;
					this.$store.dispatch('getSongsDetail', this.trackIds).then((res) => {
						this.data.songs = res.map((v, i) => {
							v.idx = i + 1;
							return v;
						});
						uni.hideLoading();
					});
				}
			}

			console.log('歌单的数据', this.data.songs);
		},

		/**
		 * 播放全部
		 */
		playAll() {
			const nextSongId = this.data.songs[0].payload;
			this.$store.dispatch('player/setPlayerInfo', nextSongId);
			uni.showToast({
				title: '正在加入队列',
				icon: 'loading',
				duration: 2000
			});
			this.$store.dispatch('getSongsDetail', this.trackIds).then((res) => {
				console.log('播放队列', res);
				this.$store.dispatch('player/setQueue', res);
				uni.showToast({
					title: '已添加至队列',
					icon: 'success',
					duration: 2000
				});
			});
			uni.navigateTo({
				url: `/pages/player/player?type=poster&payload=${data.payload}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
// 歌单列表
.list-songs {
	width: 100%;
	height: 100%;
	flex: 1;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	margin-bottom: 54px;

	// 播放全部按钮
	.list-songs__action {
		z-index: 2;
		position: sticky;
		top: calc(var(--nav-tab-height-custom) + var(--my-status-bar-height) - 1px);
		left: 0;
		height: 102.5rpx;
		width: 100%;
		padding: 0 23rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.list-songs__action-left,
		.list-songs__action-right {
			height: 38.5rpx;
			display: flex;
			align-items: center;
		}

		.list-songs__action-left {
			// 播放按钮
			.list-songs__action-left-play {
				width: 38.5rpx;
				height: 38.5rpx;
				border-radius: 50%;
				background-size: 40%;
				background-position: center;
				background-repeat: no-repeat;
				background-color: var(--theme-color);
				background-image: url('@/static/icon-play-square.png');
				margin-right: 20.5rpx;
			}
			//
			.list-songs__action-left-desc {
				.action-left-desc__text-1 {
					font-size: 32rpx;
					font-weight: 600;
					color: var(--theme-text-title-color);
					margin-right: 16rpx;
				}
				.action-left-desc__text-2 {
					font-size: 21.7rpx;
					font-weight: 400;
					color: rgb(153, 153, 153);
				}
			}
		}
	}
}
</style>
